<template>
	<view>
		<view class="flex space alcenter mb30">
			<view class="flex alcenter">
				<image class="unio2o-store-logo" :src="''"></image>
				<view  class="ml20 ft16 text-default">
					卡夫卡少儿艺术培训…
				</view>
			</view>
			<view class="ft14 text-notice">
				<text>距我</text>
				<text class="text-theme">1.2km</text>
			</view>
		</view>
		
		<view class="box-shadow pd30 mt20 bg-w box-shadow bdr16 ">
			<view class="flex">
				<view class="unicard-tuan-l bdr8">
					<image class="unicard-tuan-img bdr8" mode="aspectFill" :src="''"></image>
					<view class="unicard-tuan-status">
						<text class="iconfont iconlabel_consumption ft50"></text>
					</view>
				</view>
				<view class="unicard-tuan pl30">
					<view class="ft16 ftw600 text-default text-over">萌乐园少儿200分钟智力拼盘...</view>
					<view class="flex alend space mt30">
						<view>
							<view class="text-notice ft14">单价：<text class="text-line">¥299</text></view>
							<view class="mt20 unicard-tag-use">免费消费5次</view>
						</view>
						<view class="unicard-tuan-look flex center alcenter text-w ftw600 ft14">
							查看详情
						</view>
					</view>
				</view>
			</view>
			<view class="line mt30 mb30"></view>
			<view class="flex space alcenter ft14">
				<view>
					<text class="text-notice">已消费：</text>
					<text class="ftw600 text-main">5次</text>
				</view>
				
				<view>
					<text class="text-notice">剩余消费：</text>
					<text class="ftw600 text-theme">0次</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		}
	}
</script>

<style>
	.unicard-tuan-l{
		width: 160rpx;
		height: 160rpx;
		position: relative;
		overflow: hidden;
	}
	.unicard-tuan-status{
		position: absolute;
		width: 160rpx;
		height: 160rpx;
		left: 0;
		top: 0;
		background: rgba(0,0,0,.5);
		text-align: center;
		line-height: 160rpx;
		color:rgba(255,255,255,.8);
	}
	.unicard-tag-use{
		background:linear-gradient(90deg,rgba(241,226,201,1) 0%,rgba(243,187,110,1) 100%);
		height: 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 8rpx;
		color: #764E18;
	}
	.unicard-tuan-img{
		width: 160rpx;
		height: 160rpx;
	}
	.unicard-tuan{
		width: calc(100% - 160rpx);
	}
	.unicard-tuan-look{
		width:160rpx;
		height:64rpx;
		background:#FF6D00;
		box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
		border-radius:32rpx;
	}
</style>